<template>
	<view>
		<view class="content">
			<!-- <u-sticky style="position: fixed;top: 0;z-index: 100;"> -->
				<u-navbar :is-back="true" :title="title"  title-color="#000" :border-bottom="false" >
				</u-navbar>
			<!-- </u-sticky> -->
			<view class="main">
				<view class="mainTable">
					<view class="mainTableNr">
						<view class="tableTh">
							<span class="tableData_topTitle">地市</span>
							<span class="tableData_topTitle">区县</span>
							<span class="tableData_topTitle">数量</span>
						</view>
						<view class="tableTd" :style="{height: isHig4 && DataList1.length > 3 ?  '450rpx' : '' }" >
							<view v-if="DataList1.length>0" :class="getRowClass(index)" @click="onTableItem(item)"  v-for="(item, index) in DataList1" :key="index">
								<span class="tableData_bomTitle">{{ item.City }}</span>
								<span class="tableData_bomTitle">{{ item.County  ? item.County : '-' }}</span>
								<span class="tableData_bomTitle" style="color: #1B9CFF;text-decoration-line: underline;" >{{ item.Num }}</span>
							</view>	
							<view class="tableTdNull" v-if="DataList1.length == 0">
								无
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '隐患工单超时数',
				cityName: this.$route.query.cityName || '武汉',
				DataList1: [],
				isHig4: false,
				type: this.$route.query.type,
			}
		},
		mounted() {
			let type = this.$route.query.type
			if(this.$route.query.type == 11){
				this.title = '事件定界告警关联失败数'
			}else{
				this.title = '隐患工单超时数'
			}
			//明细
			this.getcountyData()
		},
		methods: {
			//明细
			async getcountyData() {
				let parmes = '?type='+ this.type + '&city=' + this.cityName
			
				let data = await this.$api.getcountyData(parmes);
				if (data.Code == 200) {
					this.DataList1 = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			getRowClass(index) {
			    // 检查行号是否为奇数（长度为1、3、5等）
			    if (index % 2 !== 0) {
			      return 'odd-row tableTr';
			    }
			    return 'tableTr';
			},
			onTableItem(item){
				this.$router.push({
					path:'/pagesJK/details/zhuanqu1',
					query:{ 
					   cityName: item.City,
					   districtName: item.County,
					   type: this.type,
					}
				});
			}
		}
	}
</script>


<style lang="less">
	.content{
		height: 100vh;
		overflow: hidden;
	}
	.main {
		width: 100%;
		display: block;
		.mainNav{
			display: flex;
			align-items: center;
			width: 750rpx;
			background-color: #fff;
			border-top: 1px solid #F0F1F2;
			position: fixed;
			top: 88rpx;
			left: 0;
			z-index: 100;
			.mainNavItem{
				display: inline-block;
				line-height: 84rpx;
				font-size: 30rpx;
				margin-left: 32rpx;
				margin-right: 10rpx;
				color: #A7ABBB;
			}
			.nav2{
				width: 44%;
				text-align: center;
			}
		}
		.mainNav2{
			width: 750rpx;
			height: 86rpx;
			background: #EEF4FC;
			border: 1rpx solid #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			position: fixed;
			top: 180rpx;
			left: 0;
			z-index: 100;
			.mainNav2_item{
				padding: 12rpx 34rpx;
				background: #FFFFFF;
				font-size: 26rpx;
				border-radius: 30rpx;
				border: 1rpx solid #F1F1F1;
				display: flex;
				align-items: center;
				margin-right: 20rpx;
			}
			.mainNav2_sjx{
				  width: 0;
				  height: 0;
				  border-left: 10rpx solid transparent; /* 左边框透明 */
				  border-right: 10rpx solid transparent; /* 右边框透明 */
				  border-top: 18rpx solid #000; /* 上边框有颜色，形成三角形 */
				  margin-left: 26rpx;
			}
		}
		.mainTable{
			width: 750rpx;
			background: #FFFFFF;
			display: inline-block;
			.mainTable_topTitle{
				height: 98rpx;
				display: flex;
				align-items: center;
				.mainTable_topTitle_ble{
					margin-left: 34rpx;
					margin-right: 22rpx;
					width: 8rpx;
					height: 30rpx;
					background: #1B9CFF;
					border-radius: 4rpx;
				}
				.mainTable_topTitle_name{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					font-style: normal;
					text-transform: none;
				}
			}
			.mainTableNr{
				width: 710upx;
				border-radius: 20upx 20upx 0 0;
				overflow: hidden;
				position: relative;
				margin: 0 auto 30rpx;
				background-color: #fff;
				overflow-x: auto;
				position: relative;
				.tableTh{
					width: inherit;
					height: 103rpx;
					background: #F2F5F8;
					box-shadow: inset 0rpx 10rpx 6rpx 1rpx rgba(108,148,182,0.2);
					border: 1rpx solid #A4B8D3;
					border-radius: 20upx 20upx 0 0;
					display: flex;
					align-items: center;
					overflow: hidden;
					position: absolute;
					top: 0;
					.tableData_topTitle{
						min-width: 120rpx;
						flex: 1;
						text-align: center;
						display: block;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #2654B0;
					}
				}
				.tableTd{
						padding: 100upx 0 0;
						height: calc(100vh - 120rpx);
						overflow-y: auto;
						.tableTr{
							padding: 10upx 0;
							display: flex;
							align-items: center;
							border-radius: 8rpx;
						}
						.odd-row{
							background: #F1F6FF;
						}
						.tableData_bomTitle{
							min-width: 120rpx;
							flex: 1;
							text-align: center;
							height: 100%;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24upx;
							color: #5F6475;
							line-height: 24px;
							display: block;
							font-style: normal;
							text-transform: none;
						}
					}
				.gengduo{
					width: 709upx;
					height: 60upx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #F1F6FF;
					position: absolute;
					bottom: 0;
					left: 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24upx;
					color: #2654B0;
					.icon_arrow_down{
						width: 24upx;
						height: 12upx;
						margin-left: 13upx;
					}
				}
				.tableTdNull{
					width: 100%;
					text-align: center;
					margin: 40rpx auto;
					font-size: 28rpx;
					color: #5F6475;
				}
			}
			
		}
	}
	.popupBox{
		.boxNr{
			width: 500rpx;
			background: #F7F9FC;
			overflow-y: auto;
		}
		.nrTitle{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: #000000;
			font-style: normal;
			text-transform: none;
			padding: 28upx 30upx;
		
		}
	}
	
</style>